Estoy haciendo una solicitud de recuperación en React para mi servidor Node.js.
Cada vez que NO incluyo credentials: "include" y en mi solicitud de recuperación, la solicitud se realiza correctamente al servidor y se devuelve al cliente.
Sin embargo , cuando incluyo credentials: "include" , como a continuación:
fetch('http://localhost:8000/', { method: "GET", 'credentials': 'include', headers: new Headers({ 'Accept': 'application/json', 'Access-Control-Allow-Origin':'http://localhost:3000/', 'Content-Type': 'application/json', }) }) ....Me sale este error de verificación previa:
login:1 Access to fetch at 'http://localhost:8000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
¿Por qué necesito incluir cualquiera de esos?
'Access-Control-Allow-Origin':'http://localhost:3000/' entonces el servidor lo hará no aceptar la solicitud.credentials: "include" . Si elimino todos los encabezados e incluyo el mode: 'no-cors' , entonces se ejecuta la solicitud de búsqueda y la cookie de sesión se envía al servidor, pero obviamente obtengo una respuesta opaca y necesito usar cors de todos modos.Hay muchas preguntas de desbordamiento de pila SIMILARES a esta, pero no exactas, por lo que sus soluciones no funcionan.
Aquí hay algunas cosas que he intentado que no funcionaron:
Esto ya está en mi servidor, pero alguien sugirió probarlo en el lado del cliente, así que lo hice: 'Access-Control-Request-Method': 'GET, POST, DELETE, PUT, OPTIONS',
'Access-Control-Allow-Credentials': 'true',
'withCredentials': 'true',
Origin: 'http://localhost:3000/auth',
crossorigin: true,
Y sí, ya configuré un proxy (que ayudó a resolver un problema anterior) como tal: "proxy": "http://localhost:8000"
He intentado muchas más soluciones en vano, estoy seguro de que he leído, si no todas, la gran mayoría de todas las preguntas relacionadas con este problema y las respuestas correspondientes. Mi servidor está configurado correctamente, por lo que no incluí ningún código.
En un mundo ideal, no necesitaría usar credentials: "include" para que la cookie de sesión se envíe de vuelta a mi servidor, pero esa es la causa de otra solución que tuve que implementar.
Si alguien pudiera ayudarme, estaría muy agradecido.
Mi solicitud de verificación previa pasa cada vez que NO incluyo credentials: "include" , pero no se pasa la cookie de sesión.
La cookie de sesión se pasa cuando incluyo credentials: "include" y mode: 'no-cors' , sin embargo, recibo una respuesta opaca y necesito usar cors.
Finalmente, cuando combino los dos (cors y credenciales), mi solicitud de verificación previa falla con el siguiente error:
login:1 Access to fetch at 'http://localhost:8000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
La explicación correcta aquí es que el servidor devolvió el encabezado Access-Control-Allow-Origin: * en la respuesta (como se describe en el mensaje de error).
Sin credenciales esto es aceptable. Sin embargo, para citar la documentación de Mozilla CORS ,
Al responder a una solicitud con credenciales, el servidor debe especificar un origen en el valor del encabezado Access-Control-Allow-Origin, en lugar de especificar el comodín "*".
Además, si ya estaba usando el módulo npm cors para manejar la configuración de los encabezados de respuesta, tenga en cuenta que
La configuración por defecto es el equivalente a:
{ "origin": "*", "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", "preflightContinue": false, "optionsSuccessStatus": 204 } Así que tienes que configurarlo explícitamente. Esta es la razón por la cual la respuesta de @yeeeehaw funcionó: sugirieron establecer explícitamente la opción de origin , lo que se traduce en configurar Access-Control-Allow-Origin detrás de escena.
Tenga en cuenta que, como solución alternativa, en lugar de establecer explícitamente el origin (es decir Access-Control-Allow-Origin ), puede reflejar el origen de la solicitud como su valor. El cors middleware proporciona convenientemente esto a través de su configuración.
Booleano: configure el origen en verdadero para reflejar el origen de la solicitud, según lo define req.header('Origin'), o configúrelo en falso para deshabilitar CORS.
origin: trueEn Stack Overflow esto también se ha descrito aquí , y en el nivel de proxy inverso aquí (para NGINX). Tal vez la pregunta más similar está aquí .
Si desea aceptar solicitudes de múltiples dominios diferentes, también puede hacer algo como esto:
app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', req.headers.origin); res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); });Como se documenta aquí: https://www.zigpoll.com/blog/cors-with-express-and-fetch
lo más probable es que esto provenga de su servidor. ¿Tiene el paquete cors npm instalado en el backend?
https://www.npmjs.com/package/cors
Necesitarás configurarlo también.
Lo más probable es que esté en su archivo index.js.
const express = require("express") const cors = require("cors"); const app = express(); app.use(cors({ origin : http://localhost:3000 (Whatever your frontend url is) credentials: true, // <= Accept credentials (cookies) sent by the client }) app.use("/api/whatever/the/endpoint", yourRouter);Esto debe configurarse antes de cualquier ruta. El origen puede ser una matriz de dominios incluidos en la lista blanca (permitidos) para comunicarse con su API de back-end.